<template>
  <div id="addBankCard_container">
    <div class="addBankCard-wrap">
      <Return :title="type"></Return>
      <div class="form-body">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
          <el-form-item prop="real_name" class="custom-item">
            <el-input
              class="custom-input"
              placeholder="姓名"
              v-model="ruleForm.real_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="card_id" class="custom-input">
            <el-input
              :placeholder="type === '身份认证' ? '请输入身份证号' : '请输入驾驶证编号'"
              v-model="ruleForm.card_id"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Tent",
  data() {
    return {
      ruleForm: {
        real_name: "",
        card_id: "",
      },
      type: this.$route.query.type,
      vcode: "",
      rules: {
        real_name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        card_id: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ]
      },
    };
  },
  methods: {
    submitForm() {
      // 校验
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let reqData = {
            id: this.$store.state.userAbout.user_id || JSON.parse(localStorage.getItem('userInfo')).id,
            real_name: this.ruleForm.real_name
          };
          this.type === '身份认证' ? reqData.card_id = this.ruleForm.card_id : reqData.drivingLicence_id = this.ruleForm.card_id
          this.AddIdTent(reqData)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    ...mapActions("userAbout", ["AddIdTent"]),
  },
};
</script>

<style lang="scss" scoped>
#addBankCard_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .addBankCard-wrap {
    width: 348px;
    margin: auto;
    .form-body {
      .account_bank {
        width: 100%;
      }
      .vcode {
        border: none;
      }
    }
  }
}
</style>>